import {
	observer
} from 'mobx-react';
import {
	WeaSearchGroup,
	WeaLocaleProvider,
} from 'ecCom';
import Menus from './Menus';
import NoLinkageForm from './NoLinkageForm';
import CollapseForm from './CollapseForm';
import LinkageForm from './LinkageForm';
import Table from './Table';
import Tab from './Tab';
import Step from './Step';
import Title from './Title';
import TableUnderSearchGroup from './TableUnderSearchGroup';
import LinkageFormUnderSearchGroup from './LinkageFormUnderSearchGroup';
import TableEdit from './TableEdit';
import SearchCondition from './SearchCondition';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class PageContent extends React.Component {
	constructor(props) {
		super(props);
	}

	getInfo = (index) => {
		if (index === 0) {
			return this.getStepOneInfo()
		} else if (index === 1) {
			return this.getStepTwoInfo()
		} else {
			return this.getStepThreeInfo()
		}
	}

	getStepOneInfo = () => {
		const {
			store
		} = this.props, {
			oneForm,
			twoForm,
			cPage,
			modify
		} = store;

		const personInfo = (
			<div>
				<Title ecId={`${this && this.props && this.props.ecId || ''}_Title@2o5712`} title={getLabel(505827,'本人信息')} clickEventListener={modify}/>
				<div className='personal-info'>
					<NoLinkageForm ecId={`${this && this.props && this.props.ecId || ''}_NoLinkageForm@daie7u`} form={oneForm.form} />
				</div>
			</div>
		);
		const components = [personInfo];

		if (cPage === 'loan') {
			const loanInfo = <CollapseForm ecId={`${this && this.props && this.props.ecId || ''}_CollapseForm@d1scbb`} form={twoForm.form}/>;
			components.push(loanInfo);
		}
		return components;
	}

	getStepTwoInfo = () => {
		const {
			store
		} = this.props, {
			twoForm,
			oneForm,
			cPage,
			onFormChange,
			groupLinkage,
			linkage,
		} = store;

		const conditionInfo = <CollapseForm ecId={`${this && this.props && this.props.ecId || ''}_CollapseForm@nobbzh`} form={oneForm.form} onFormChange={onFormChange}/>;

		const components = [conditionInfo];

		if (['childEducation', 'supportOlder'].includes(cPage)) {
			const tableInfo = (
				<TableUnderSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_TableUnderSearchGroup@wppeb2`} store={store}/>
			);
			components.push(tableInfo);
		}
		if (['continualEducation'].includes(cPage)) {
			const lfus = (
				<LinkageFormUnderSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_LinkageFormUnderSearchGroup@duuaeb`} store={store} formContainer={twoForm} title={this.getPanelTitle()} />
			);
			components.push(lfus);
		}
		if (['loan', 'rent'].includes(cPage)) {
			const lf = (
				<LinkageForm ecId={`${this && this.props && this.props.ecId || ''}_LinkageForm@vwony4`} {...twoForm} groupLinkage={groupLinkage} linkage={linkage}/>
			);
			components.push(lf);
		}
		return components;
	}

	getStepThreeInfo = () => {
		const {
			store
		} = this.props, {
			linkage,
			oneForm,
			cPage,
			groupLinkage,
			onFormChange,
		} = store;

		if (cPage === 'loan') {
			return <LinkageForm ecId={`${this && this.props && this.props.ecId || ''}_LinkageForm@ejcnkt`} {...oneForm} groupLinkage={groupLinkage} linkage={linkage} onFormChange={ onFormChange}/>
		}
		const components = [];
		if (['childEducation', 'rent', 'supportOlder'].includes(cPage)) {
			components.push(<LinkageFormUnderSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_LinkageFormUnderSearchGroup@63d1du`} store={store} formContainer={oneForm} title={this.getPanelTitle()} />);
		}
		if (cPage === 'supportOlder') {
			const {
				form
			} = oneForm, {
				onlyChild
			} = form.getFormParams();

			if (onlyChild === '2') {
				components.push(<div className='table'>
					<TableEdit ecId={`${this && this.props && this.props.ecId || ''}_TableEdit@gv635v`} store={store}/>
				</div>);
			}
		}

		return components;
	}

	getPanelTitle = () => {
		const {
			store
		} = this.props, {
			cPage
		} = store;

		if (cPage === 'supportOlder') {
			return getLabel(505828, '分摊方式');
		}
		if (['childEducation', 'rent'].includes(cPage)) {
			return getLabel(505829, '配偶信息');
		}
		if (cPage === 'continualEducation') {
			return getLabel(505830, '继续教育信息');
		}

	}

	render() {
		const {
			store
		} = this.props, {
			cPage,
			SEARCHGROUPS,
			oneForm,
			step,
			modify,
			TAXDEDUCTIONITEMS,
			searchCondition,
			SEARCHCONDITION,
			onFormChange,
		} = store, {
			currentIndex
		} = step;


		//首页
		if (cPage === 'main') {
			return <Menus ecId={`${this && this.props && this.props.ecId || ''}_Menus@ul6343`} menus={SEARCHGROUPS} />;
		}

		if (cPage === 'recordInfo') {
			return <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@kqi0ff`} store={store}/>;
		}

		if (cPage === 'queryDeductionMoney') {
			return (
				<div>
					<SearchCondition ecId={`${this && this.props && this.props.ecId || ''}_SearchCondition@slavv0`} store={store}/>
					<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@tqifpg`} store={store}/>
				</div>
			)
		}

		//个人信息
		if (cPage === 'personalInfo') {
			const {
				form,
			} = oneForm;

			return (
				<div className='personal-info' style={{paddingTop: 10}}>
					<NoLinkageForm ecId={`${this && this.props && this.props.ecId || ''}_NoLinkageForm@0sanl1`} form={form} onFormChange={onFormChange}/>
				</div>
			);
		}

		//家庭成员
		if (cPage === 'familyMember') {
			return (
				<div>
					<Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@mfih0s`} store={store} />
					<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@bdbd2e`} store={store} />
				</div>
			)
		}

		//专项附加扣除项目
		if (TAXDEDUCTIONITEMS.includes(cPage)) {
			return (
				<div className='taxReduction'>
					<Step ecId={`${this && this.props && this.props.ecId || ''}_Step@oejqvj`} store={store}/>
					{
						this.getInfo(currentIndex)
					}
				</div>
			)

		}

	}
}